<!doctype html>
<html>

<head>
	<meta charset="utf-8">
	<title></title>
	<meta name="viewport"
		content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
	<link href="../../css/mui.min.css" rel="stylesheet" />
	<link rel="stylesheet" type="text/css" href="../../css/common.css" />
	<link rel="stylesheet" type="text/css" href="./css/index.css" />
</head>

<body>
	<!-- 首页 -->
	<div class="mui-content">
		<!-- 轮播 -->
		<div class="banner-content">
			<div class="search-box">
				<span class="mui-icon mui-icon-search"></span>
				<input type="text" name="" id="search" value="" placeholder="请搜索商品名称或编号" readonly="readonly" />
			</div>
			<div class="mui-slider">
				<div class="mui-slider-group">
					<div class="mui-slider-item"><a href="#"><img src="../../images/home/demo.jpg" /></a></div>
					<div class="mui-slider-item"><a href="#"><img src="../../images/home/demo.jpg" /></a></div>
					<div class="mui-slider-item"><a href="#"><img src="../../images/home/demo.jpg" /></a></div>
					<div class="mui-slider-item"><a href="#"><img src="../../images/home/demo.jpg" /></a></div>
				</div>
				<div class="mui-slider-indicator">
					<div class="mui-indicator mui-active"></div>
					<div class="mui-indicator"></div>
					<div class="mui-indicator"></div>
					<div class="mui-indicator"></div>
				</div>
			</div>
		</div>
		<!-- 公告栏 -->
		<div class="notice">
			<img src="../../images/home/icon_home_notice.png" class="icon_home_notice">
			<span class="notice-text">这里是公告标题艾沃女神节狂欢钜惠等你来，全场3.8折限5456465446</span>
			<img src="../../images/home/icon_common_arrow_right.png" class="icon_common_arrow_right">
		</div>
		<!-- 品牌入口 -->
		<div class="brand-content">
			<div class="brand-line-box">
				<div class="brand-line">品牌入口</div>
			</div>
			<div class="brand-img-list" id="brand-img-list">
				<div class="brand-img">
					<img src="../../images/home/demo.jpg">
				</div>
				<div class="brand-img">
					<img src="../../images/home/demo.jpg">
				</div>
				<div class="brand-img">
					<img src="../../images/home/demo.jpg">
				</div>
				<div class="brand-img">
					<img src="../../images/home/demo.jpg">
				</div>
				<div class="brand-img">
					<img src="../../images/home/demo.jpg">
				</div>
			</div>
		</div>
		<!-- 热卖推荐 -->
		<div class="hot-recommend">
			<div class="hot-title">
				<span class="title-line">
				</span>
				<span class="title-text">热卖推荐</span>
			</div>
			<div class="recommend-list">
				<div class="recommend-list-item">
					<img src="../../images/home/demo.jpg" class="recommend-img">
					<div class="recommend-info">
						<div class="goods-info">
							<span class="goods-title">欧莱雅黑精华抗衰老紧致补水保湿精华液官方正品50mL 今日下单即赠新品...</span>
							<span class="goods-code">编号:1234</span>
						</div>
						
						<span class="goods-price">￥<span class="fuhao">69.80</span></span>
					</div>
				</div>
				<div class="recommend-list-item">
					<img src="../../images/home/demo.jpg" class="recommend-img">
					<div class="recommend-info">
						<div class="goods-info">
							<span class="goods-title">欧莱雅黑精华抗衰老紧致补水保湿精华液官方正品50mL 今日下单即赠新品...</span>
							<span class="goods-code">编号:1234</span>
						</div>
						
						<span class="goods-price">￥<span class="fuhao">69.80</span></span>
					</div>
				</div>
			</div>
		</div>
	</div>
	<!-- 底部tab -->
	<nav class="mui-bar mui-bar-tab">
		<span class="mui-tab-item mui-active" onclick="goHome()">
			<img src="../../images/tabbar/icon_label_home_selected.png" class="tabbar-img">
			<span class="mui-tab-label">艾沃商城</span>
		</span>
		<span class="mui-tab-item " onclick="goHeadlines()">
			<img src="../../images/tabbar/icon_label_news_unselected.png" class="tabbar-img">
			<span class="mui-tab-label">艾沃头条</span>
		</span>
		<span class="mui-tab-item" onclick="goCart()">
			<img src="../../images/tabbar/icon_label_shoppingcart_unselected.png" class="tabbar-img">
			<span class="mui-tab-label">购物车</span>
		</span>
		<span class="mui-tab-item" onclick="goMine()">
			<img src="../../images/tabbar/icon_label_mine_unselected.png" class="tabbar-img">
			<span class="mui-tab-label">我的</span>
		</span>
	</nav>
	<script src="../../js/mui.min.js"></script>
	<script src="../../js/jquery-3.4.1.min.js" type="text/javascript" charset="utf-8"></script>
	<script src="../../js/resize.js"></script>
	<script type="text/javascript">
		mui.init()
		// 页面跳转
		function goHeadlines() {
			window.location.href = '../headlines/index.html'
		}

		function goHome() {
			window.location.href = '../home/index.html'
		}

		function goCart() {
			window.location.href = '../cart/index.html'
		}

		function goMine() {
			window.location.href = '../mine/index.html'
		}
		$(function ($) {
			// 文档一加载就执行
			$(document).ready(function () {
				obj.setRem()
			})
			// 窗口调节
			$(window).resize(function () {
				obj.setRem()
			});


			//轮播
			var gallery = mui('.mui-slider');
			gallery.slider({
				interval: 2500 //自动轮播周期，若为0则不自动播放，默认为0；
			});
			// 跳转搜索
			$('#search').click(function () {
				window.location.href = './pages/search/search.html';
			})
			// 品牌跳转
			$('#brand-img-list').on('click', '.brand-img', function () {
				window.location.href = './pages/goodslist/index.html?brand=1';
			})
			// 热卖推荐 跳转详情
			$('.recommend-list').on('click', '.recommend-list-item', function () {
				window.location.href = './pages/goodsDetail/index.html';
			})
		});

	</script>
</body>

</html>